<template>
    <div class="oa">
        <el-tabs v-model="activeValue2" type="card">
            <el-tab-pane v-for="item in panes" :label="item.label" :name="item.name" :key="item.key">
                <component :is="item.content" :activeValue="activeValue2" :type="item.type"></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import OaTaskTab from './oa-task-tab.vue';

@Component({ name: 'OaTaskManage', components: { OaTaskTab } })
export default class OaTaskManage extends Vue {
    activeValue2: string = '';
    panes: any[] = [
        {
            label: 'OA当前任务',
            name: 'oa-current-task',
            type: 'current',
            content: 'OaTaskTab',
        },
        {
            label: 'OA历史任务',
            name: 'oa-history-task',
            type: 'history',
            content: 'OaTaskTab',
        },
    ];

    @Prop() activeValue: string;
    isFirst: boolean = true;
    @Watch('activeValue', { immediate: true })
    handleActiveValue() {
        if (this.activeValue === 'oa-task-manage') {
            if (this.isFirst) {
                this.activeValue2 = 'oa-current-task';
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.oa {
    min-width: 1200px;
    padding-top: 4px;
    height: 100%;
}
</style>
